<template>
    <div class="indoor_box">
        <div class="indoor_header">
            <img src="../assets/image/indoor_bg.png" class="indoor_bg">
        </div>
        <div class="indoor_content">
            <mu-container class="indoor_con" fluid>
                <mu-row gutter class="indoor_date dd-clearfix">
                    <mu-col span="10" sm="10" md="10" lg="10">
                        <div class="indoor_date_list dd-clearfix">
                            <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value1" label="开始时间" type="date" label-float></mu-date-input>
                            <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value2" label="结束时间" type="date" label-float></mu-date-input>
                            <div class="dd-fr">
                                <mu-select label="单位" class="dd-fl unit" label-float   v-model="normal.value1">
                                    <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                                </mu-select>
                                <mu-button color="#0287b2" class="dd-fl search">搜索</mu-button>
                            </div>
                        </div>
                    </mu-col>
                </mu-row>
                <mu-row gutter class="indoor_echarts"> 
                    <mu-col span="5" sm="5" md="5" lg="5">
                        <div class="temp dd-fl">
                            <div :class="temp_name" :id="temp_id" :style="{height:tempheight,width:tempwidth}" ref="mytempEchart"></div>
                        </div>
                    </mu-col>
                    <mu-col span="5" sm="5" md="5" lg="5">
                        <div class="temp_item">
                            <div :class="tempitem_name" :id="tempitem_id" :style="{height:tempitemheight,width:tempitemwidth}" ref="myitemEchart"></div>
                        </div>
                        <div class="pm_chart">
                            <div :class="pm_name" :id="pm_id" :style="{height:pmheight,width:pmwidth}" ref="mypmEchart"></div>
                        </div>
                    </mu-col>
                </mu-row>
            </mu-container>
        </div>
        <div class="back_footer">
            <img src="../assets/image/danger_bottom_bg.png" class="danger_bottom_bg">
            <div class="back_btn dd-fr" v-on:click="back">
                <img src="../assets/image/danger_btn.png">
                <span>返回主页</span>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
         props: {
            temp_name: {
                type: String,
                default: 'tempclass'
            },
            temp_id: {
                type: String,
                default: 'temp'
            },
            tempwidth: {
                type: String,
                default: '100%'
            },
            tempheight: {
                type: String,
                default: '100%'
            },
            tempitem_name: {
                type: String,
                default: 'tempitemclass'
            },
            tempitem_id: {
                type: String,
                default: 'tempitem'
            },
            tempitemheight: {
                type: String,
                default: '100%'
            },
            tempitemwidth: {
                type: String,
                default: '100%'
            },
            pm_name: {
                type: String,
                default: 'pmclass'
            },
            pm_id: {
                type: String,
                default: 'pm'
            },
            pmheight: {
                type: String,
                default: '100%'
            },
            pmwidth: {
                type: String,
                default: '100%'
            },
        },
        data () {
            return {
                lightchart: null,
                options: [
                    '年', '月', '日', '季度',
                ],
                normal: {
                    value1: '',
                    value2: '',
                    value3: '',
                    value4: 'Option 1',
                    value5: 'Option 2'
                },
                finshshow: false,
                value1: undefined,
                value2: undefined,
            };
        },
        mounted() {
            this.inittempchart();
            this.inititemchart();
            this.initpmchart();
        },
        methods: {
            inittempchart (){
                this.chart = echarts.init(this.$refs.mytempEchart);
                //配置和数据
                this.chart.setOption({
                    title : {
                        text: '温度变化曲线图',
                        backgroundColor: 'rgba(0,0,0,0)',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#c8e6fe'          // 主标题文字颜色
                        },
                    },
                    
                    tooltip : {
                        trigger: 'axis',
                    },
                    legend: {
                        data:['最高温','最低温'],
                        x:'right',
                        textStyle:{
                            color:'#7c97ac'
                        }
                    },
                    color:['#e7c547','#2b70b3'],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#04223a'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c9e7ff'
                            }
                        },
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],                   
                    yAxis : [
                        {
                            type : 'value',
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                        },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#2b70b3'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            name: "最高温",
                            type: "line",
                            data: [10,13,15,20,22,30,35]
                        },
                        {
                            name: "最低温",
                            type: "line",
                            data: [-1,3,4,2,-3,9,10]
                        },
                    ]
                })
            },
            inititemchart (){
                this.chart = echarts.init(this.$refs.myitemEchart);
                //配置和数据
                this.chart.setOption({
                    title : {
                        text: '温度变化曲线图',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#c8e6fe'          // 主标题文字颜色
                        },
                    },                   
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid:{
                        x:50,
                        y:35,
                        x2:30,
                        y2:30
                    },
                    color:['#5cd1e2'],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a'],
                                }                                                           
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#04223a'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c9e7ff'
                            }
                        },
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],                   
                    yAxis : [
                        {
                            type : 'value',
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1fbec1'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            name: "温度",
                            type: "line",
                            data: [10, 18, 12, 4, 8, 23, 16, 18, 19]
                        }
                    ]
                })
            },
            initpmchart (){
                this.chart = echarts.init(this.$refs.mypmEchart);
                //配置和数据
                this.chart.setOption({
                    title : {
                        text: 'PM2.5曲线图',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#c8e6fe'          // 主标题文字颜色
                        },
                    },                   
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid:{
                        x:50,
                        y:35,
                        x2:30,
                        y2:30
                    },
                    color:['#76c619'],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a'],
                                }                                                           
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#04223a'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c9e7ff'
                            }
                        },
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],                   
                    yAxis : [
                        {
                            type : 'value',
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#76c619'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            name: "PM2.5",
                            type: "line",
                            data: [30, 35, 22, 40, 68, 23, 26, 48, 69]
                        }
                    ]
                })
            },
            handleSortChange ({name, order}) {
                this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
        }
    }
</script>

<style lang="scss">

//主题
@import '~@/assets/style/theme/default.scss';
//样式
@import '~@/assets/style/style.scss';

</style>